<template>
  <div>
    <div>
      <el-input v-model="searchText" @keyup.enter.native="load" placeholder="输入订单ID进行查询" style="width: 200px">
        <i slot="prefix" class="el-input__icon el-icon-search"></i></el-input>
      <el-button @click="load" type="primary" style="margin: 10px">搜索</el-button>
      <el-button @click="reset" type="info" style="margin: 10px">重置</el-button>

      <!-- 显示当前查询状态 -->
      <el-tag v-if="isSearchingById" type="success" style="margin-left: 10px">当前显示: 订单ID {{searchText}} 的查询结果</el-tag>

    </div>

    <el-table :data="tableData" border  stripe  fit style="width: 100%">
  <el-table-column prop="orderId" label="订单编号" min-width="20%"></el-table-column>
  <el-table-column prop="order.totalPrice" label="总价" min-width="20%"></el-table-column>
  <el-table-column prop="order.userId" label="下单人ID" min-width="20%"></el-table-column>
  <el-table-column prop="order.orderTime" label="下单时间" min-width="40%"></el-table-column>
</el-table>

    <!--分页控件-->
    <div style="margin-top: 10px">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
        :page-size="pageSize" :page-sizes="[3, 5, 8, 10]" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>

    <!--订单详情弹窗-->
    <el-dialog :visible.sync="dialogFormVisible">
      <el-table :data="detail" background-color="black">
        <el-table-column label="图片" width="150">
          <template slot-scope="scope">
            <img :src="scope.row.img" min-width="100" height="100" />
          </template>
        </el-table-column>

        <el-table-column prop="goodId" label="商品id"></el-table-column>
        <el-table-column prop="goodName" label="商品名称"></el-table-column>
        <el-table-column prop="standard" label="商品规格"></el-table-column>
        <el-table-column prop="price" label="单价"></el-table-column>
        <el-table-column prop="discount" label="折扣"></el-table-column>

        <el-table-column label="实价">
          <template slot-scope="scope">
            {{scope.row.price * scope.row.discount}}
          </template>
        </el-table-column>
        <el-table-column prop="count" label="数量"></el-table-column>
        <el-table-column label="总价">
          <template slot-scope="scope">
            {{scope.row.price * scope.row.discount * scope.row.count }}
          </template>
        </el-table-column>

      </el-table>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: 'Order',
  // 页面初始化数据
  data () {
    return {
      options: [],
      searchMode: '',
      searchText: '',
      user: {},
      tableData: [],
      pageNum: 1,
      pageSize: 8,
      entity: {},
      total: 0,
      dialogFormVisible: false,
      detail: [],
      isSearchingById: false // 标记是否正在按ID查询
      // baseApi: this.$store.state.baseApi,
    }
  },
  // 页面加载完成
  created () {
    this.load()
  },
  methods: {
    handleSizeChange (pageSize) {
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange (pageNum) {
      this.pageNum = pageNum
      this.load()
    },
    // 重置搜索
    reset () {
      this.searchMode = ''
      this.searchText = ''
      this.isSearchingById = false // 重置查询状态
      // 重置后加载所有订单数据
      this.load()
    },
    // 页面加载
    async load () {
      console.log('执行load方法，searchText:', this.searchText, '类型:', typeof this.searchText)
      try {
        // 如果searchText不为空且是数字，则按ID查询单个订单
        if (this.searchText && !isNaN(this.searchText)) {
          console.log('准备按ID查询订单:', this.searchText)
          const res = await this.$http.get('/order/' + this.searchText)
          console.log('按ID查询订单结果:', res)
          if (res && res.code === 200) {
            // 将单个订单结果转换为数组格式显示
            console.log('查询成功，订单数据:', res.data)

            // 处理数据结构，确保与表格列定义匹配
            // 检查返回的数据结构
            if (res.data) {
              // 创建一个与orderDetails结构相似的对象
              const orderDetail = {
                orderId: res.data.id,
                order: {
                  totalPrice: res.data.totalPrice,
                  userId: res.data.userId,
                  orderTime: res.data.orderTime
                }
              }

              console.log('处理后的订单数据:', orderDetail)
              this.tableData = [orderDetail]
              this.isSearchingById = true // 设置为按ID查询状态
            } else {
              this.tableData = []
              this.isSearchingById = false // 查询结果为空，不显示查询状态
            }

            this.total = this.tableData.length
            console.log('设置表格数据后:', this.tableData)
          } else {
            console.error('查询订单失败:', res)
            this.$message.error(res ? res.msg : '查询订单失败')
            // 查询失败时清空表格
            this.tableData = []
            this.total = 0
            this.isSearchingById = false // 查询失败，不显示查询状态
          }
        } else {
          // 否则按分页查询所有订单
          this.isSearchingById = false // 不是按ID查询，重置状态
          console.log('准备分页查询订单, 页码:', this.pageNum, '每页大小:', this.pageSize)
          const res = await this.$http.get('/orderDetails/current/' + this.pageNum + '/size/' + this.pageSize)
          console.log('分页查询订单结果:', res)
          if (res && res.code === 200) {
            this.tableData = res.data.list
            this.total = res.data.total
            console.log('设置表格数据后:', this.tableData)
          } else {
            console.error('加载订单数据失败:', res)
            this.$message.error(res ? res.msg : '加载订单数据失败')
          }
        }
      } catch (error) {
        console.error('加载订单数据时出错:', error)
        this.$message.error('加载订单数据失败: ' + error.message)
      }
    }

  }
}

</script>
